<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>手风琴效果</title>
    <script src="https://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
    <link rel="stylesheet" href="css/index.css" />
  </head>
  <body>
    <div id="subject" class="home-subjects-v2">
      <ul>
        <li class="big">
          <a>
            <img src="http://gtms01.alicdn.com/tps/i1/T1Lvt3Fv4kXXbA5QAK-195-120.jpg_Q90.jpg">
            <div class="info">
              <h3 style="color:#f62368">聚美妆</h3>
              <p>聚美妆1/2周年庆</p>
              <p class="price"><strong>1</strong><i>折起</i></p>
              <p class="more">进入专题抢购 &gt; </p>
            </div>
            <s class="line"></s>
            <i class="mask"></i>
          </a>
        </li>
        <li>
          <a>
            <img src="http://gtms01.alicdn.com/tps/i1/T1qxGLFsVbXXbA5QAK-195-120.jpg_Q90.jpg">
            <div class="info">
              <h3 style="color:#ff578a">Baby购</h3>
              <p>宝宝该换装了，新品抢购</p>
              <p class="price"><strong>2.5</strong><i>折起</i></p>
              <p class="more">进入专题抢购 &gt; </p>
            </div>
            <s class="line"></s> <i class="mask"></i>
          </a>
        </li>
        <li>
          <a>
            <img src="http://gtms02.alicdn.com/tps/i2/T1KOSNFxXaXXbA5QAK-195-120.jpg_Q90.jpg">
            <div class="info">
              <h3 style="color:#6d3fa7">时装团</h3>
              <p>时尚春装，清新小潮搭配</p>
              <p class="price"><strong>1</strong><i>折起</i></p>
              <p class="more">进入专题抢购 &gt; </p>
            </div>
            <s class="line"></s> <i class="mask"></i>
          </a>
        </li>
        <li>
          <a>
            <img src="http://gtms04.alicdn.com/tps/i4/T1CCeIFrVbXXbA5QAK-195-120.jpg_Q90.jpg">
            <div class="info">
              <h3 style="color:#d61939">TV购</h3>
              <p>补血养颜 就这么简单</p>
              <p class="price"><strong>2.6</strong><i>折起</i></p>
              <p class="more">进入专题抢购 &gt; </p>
            </div>
            <s class="line"></s><i class="mask"></i>
          </a>
        </li>
        <li>
          <a>
            <img src="http://gtms01.alicdn.com/tps/i1/T1jmKJFyJbXXbA5QAK-195-120.jpg_Q90.jpg">
            <div class="info">
              <h3 style="color:#6f9400">聚新鲜</h3>
              <p>最纯正的泰国香米</p>
              <p class="price"><strong>5</strong><i>折起</i></p>
              <p class="more">进入专题抢购 &gt; </p>
            </div>
            <i class="mask"></i>
          </a>
        </li>
      </ul>
    </div>

    <script>
      function mouseover(e) {
        var list = $('#subject li');
        var target = $(e.target).parents('li');
        list.removeClass('big');
        target.addClass('big');
      }
      (function () {
        var outer = $('#subject');
        outer.find('li').on('mouseover', mouseover);
      })()
    </script>
  </body>
</html>